<template>
    <div class="ruzhujigou">
        <PublicHead></PublicHead>
        <div class="ruzhu">
            <div class="ruzhuBox">

                <div class="title">
                    <div>企业认证</div>
                    <div>/&ensp;QIYERENZHENG</div>
                </div>

                <div class="ruzhuForm">
                    <el-form ref="form" label-position="top" :model="formData" :rules="rules">
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="企业名称" prop="qyName">
                                    <el-input v-model="formData.qyName" placeholder="请输入企业名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
                                    <el-input v-model="formData.unifiedSocialCreditCode"
                                        placeholder="请输入统一社会信用代码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="联系人姓名" prop="contactName">
                                    <el-input v-model="formData.contactName" placeholder="请输入联系人姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="联系人手机号" prop="phone">
                                    <el-input v-model="formData.phone" placeholder="请输入联系人手机号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="联系人邮箱" prop="email">
                                    <el-input v-model="formData.email" placeholder="请输入联系人邮箱"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item2">
                                <el-form-item label="办公地区" prop="officeAddress">
                                    <el-select v-model="province" placeholder="请选择所在城市" @change="Province">
                                        <el-option label="兰州市" value="兰州市"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="margin-top: 50px;" prop="officeAddress">
                                    <el-select v-model="city" placeholder="请选择所在区县" @change="City">
                                        <el-option label="城关区" value="城关区"></el-option>
                                        <el-option label="七里河区" value="七里河区"></el-option>
                                        <el-option label="西固区" value="西固区"></el-option>
                                        <el-option label="安宁区" value="安宁区"></el-option>
                                        <el-option label="红古区" value="红古区"></el-option>
                                        <el-option label="永登县" value="永登县"></el-option>
                                        <el-option label="皋兰县" value="皋兰县"></el-option>
                                        <el-option label="榆中县" value="榆中县"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="企业办公详细地址" prop="officeDetailAddress">
                                    <el-input v-model="formData.officeDetailAddress" placeholder="请输入企业办公详细地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" class="form-item">
                                <el-form-item label="营业执照" prop="file">
                                    <el-upload :class="{ hide: hideUpload }" ref="uploadsl"
                                        :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" list-type="picture-card"
                                        :headers="{ Authorization: token }" :data="{ userId: formData.userId }"
                                        :on-success="upload" :limit="5" :on-exceed="handleExceed" :on-remove="handDelete"
                                        :on-change="ChangeImage" accept="image/jpeg,image/jpg,image/png">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                  
                                </el-form-item>
                                  <div class="zhizhao">1.请确保图片大小小于3M，图片格式为：JPG，jpeg或PNG</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="固定电话" prop="fixedLinePhone">
                                    <el-input v-model="formData.fixedLinePhone" placeholder="请输入固定电话"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="企业网站" prop="qyUrl">
                                    <el-input v-model="formData.qyUrl" placeholder="请输入企业网站"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item2">
                                <el-form-item label="注册地区" prop="officeRegisterAddress">
                                    <el-select v-model="zhuceprovince" placeholder="请选择所在城市" @change="zcProvince">
                                        <el-option label="兰州市" value="兰州市"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="margin-top: 50px;" prop="officeRegisterAddress">
                                    <el-select v-model="zhucecity" placeholder="请选择所在区县" @change="zcCity">
                                        <el-option label="城关区" value="城关区"></el-option>
                                        <el-option label="七里河区" value="七里河区"></el-option>
                                        <el-option label="西固区" value="西固区"></el-option>
                                        <el-option label="安宁区" value="安宁区"></el-option>
                                        <el-option label="红古区" value="红古区"></el-option>
                                        <el-option label="永登县" value="永登县"></el-option>
                                        <el-option label="皋兰县" value="皋兰县"></el-option>
                                        <el-option label="榆中县" value="榆中县"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="注册详细地址" prop="officeDetailRegisterAddress">
                                    <el-input v-model="formData.officeDetailRegisterAddress"
                                        placeholder="请输入注册详细地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="tableFoot">
                        <button @click="submit()">提交</button>
                    </div>
                </div>
                <div>

                </div>
            </div>
        </div>
        <PublicFoot></PublicFoot>
    </div>
</template>
  
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { qy_renzheng, deletefileId } from '../api/api'
export default {
    data() {
        return {
            https: http,
            dialogVisible: false,
            dialogImageUrl: '',
            token: localStorage.getItem('token'),
            formData: {
                contactName: '',
                email: '',
                file: [],
                officeAddress: '',
                fixedLinePhone: '',
                officeDetailAddress: '',
                officeDetailRegisterAddress: '',
                officeRegisterAddress: '',
                phone: '',
                qyName: '',
                qyUrl: '',
                unifiedSocialCreditCode: '',
                userId: this.$store.state.userId,
            },
            province: '',
            city: '',
            zhuceprovince: '',
            zhucecity: '',
            rules: {
                qyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                unifiedSocialCreditCode: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                ],
                contactName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                officeAddress: [
                    { required: true, message: '请选择办公地区', trigger: 'change' },
                ],
                officeDetailAddress: [
                    { required: true, message: '请输入企业办公详细地址', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传营业执照', trigger: 'blur' },
                ],
                officeRegisterAddress: [
                    { required: true, message: '请选择注册地区', trigger: 'change' },
                ]
            },
            hideUpload: false
        };
    },
    methods: {

        submit() {
            this.$refs.form.validate((isok) => {
                if (isok) {
                    this.formData.file = this.formData.file.toString()
                    console.log(this.formData);
                    qy_renzheng(this.formData).then((res) => {
                        if (res.data.state == '20000') {
                            this.$message({
                                message: '提交成功',
                                type: 'success',
                            });
                            setTimeout(() => {
                                this.$router.push('/homepage');
                            }, 1000);
                        } else {
                            this.$message.error(res.data.message);
                            this.formData.file = this.formData.file.split(',')
                        }
                    })
                }
            })

        },
        handDelete(file) {
            // deletefileId({fileId:file.fileId}).then((res)=>{
            // })
            console.log(file.response.data);
            var index = this.formData.file.indexOf(file.response.data)
            if (index !== -1) {
                this.formData.file.splice(index, 1)
            }
            console.log(0, this.formData.file);
            this.ChangeImage(0, this.formData.file.length)
        },
        upload(res) {
            this.formData.file.push(res.data)

        },
        ChangeImage(file, fileList) {
            this.hideUpload = fileList.length >= 5
        },
        Province() {
            this.formData.officeAddress = this.province + this.city;
        },
        City() {
            this.formData.officeAddress = this.province + this.city;
        },
        zcProvince() {
            this.formData.officeRegisterAddress = this.zhuceprovince + this.zhucecity;
        },
        zcCity() {
            this.formData.officeRegisterAddress = this.zhuceprovince + this.zhucecity;
        },
        handleExceed() {
            this.$message.warning('只能上传5张图片');
        }


    },
    components: {
        PublicHead,
        PublicFoot
    }
}
</script>
  
<style  lang="scss" scoped>
::v-deep .hide .el-upload--picture-card {
    display: none;
}

.form-item2 {
    display: flex;
    align-items: center;
}

.el-select .el-input__inner {
    width: 200px;
}

.el-input {
    width: 400px;
}

.el-select {
    width: 200px !important;

}

.zhizhao {
    width: 800px;
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D50000;
    margin-top: 20px;
}

.ruzhu {
    width: 100%;
    display: flex;
    justify-content: center;

    .ruzhuBox {
        width: 1220px;
        height: 100%;
        background: #FFFFFF;
        margin: 30px;
    }
}

.ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 50px;

    .title {
        display: flex;

        div:nth-of-type(1) {
            width: 120px;
            height: 50px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #262626;
            line-height: 50px;
            margin-bottom: 20px;
            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(2) {
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;
            margin-right: 5px;

            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(3) {
            width: 189px;
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;

            border-bottom: 4px #1285D7 solid;

        }

    }

    .title2 {
        width: 150px;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1285D7;
    }
}

.name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
}

.text,
.iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
}

.el-table__header {
    background-color: #1285D7 !important;
    color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
}

.status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
}

.el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.tableFoot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;

    button {
        margin: 0px 10px;

        &:hover {
            cursor: pointer;
        }
    }

    button:nth-of-type(1) {
        width: 98px;
        height: 40px;
        background: #2797E8;
        border: 0;
        border-radius: 3px 3px 3px 3px;
        color: white;
    }

    button:nth-of-type(2) {
        width: 98px;
        height: 40px;
        background: #F39200;
        border-radius: 3px 3px 3px 3px;
        border: 0;

        color: white;
    }

    button:nth-of-type(3) {
        width: 98px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        border: 0;
    }
}
</style>